<template>
  <div id="app">
    <h1>hello, app</h1>
    <!-- 路由的出口
        所有的页面都可以称之为组件， 也就是说一个页面是由多个组件组成，
        并且vue只有一个页面，所以叫单页面开发
        
        所以没法跳转页面 只能跳转组件，跳转组件前先配路由
    -->

    <!-- <router-link  相当于a标签 to相当于href  to是跳转不是连接 -->
     <!-- tag = "标签名" 将router-link 改成你想要的标签名 -->
        <router-link to="/">Home</router-link>|
        <router-link to="/about">about</router-link>|
        <router-link to="/vue">01声明式渲染</router-link>|
        <router-link to="/model">02v-model</router-link>|
        <router-link to="/demo">02dome.vue</router-link>|
        <router-link to="/html">03v-html和v-text.vue</router-link>|
        <router-link to="/show">04v-show和v-if.vue</router-link>|
        <router-link to="/for">05v-for</router-link>|
        <router-link to="/on">03事件v-on.vue</router-link>|
        <router-link to="/bind">v-bind</router-link>|
        <router-link to="/02demo">02demo.vue</router-link>|
        <router-link to="/tab">tab切换</router-link>|
        <router-link to="/filter">过滤器</router-link>|
        <router-link to="/time">过滤时间戳</router-link>|
        <router-link to="/lef">生命周期</router-link>|
        <router-link to="/computed">计算属性</router-link>|
        <router-link to="/feng">平均分</router-link>|
        <router-link to="/get_set">get_set</router-link>|
        <router-link to="/watch">监听</router-link>|
        <router-link to="/shop">购物车</router-link>|
        <router-link to="/goshop">go_shop</router-link>|
        <router-link to="/watch2">深度监听</router-link>|
        <router-link to="/diff">watch和computed区别</router-link>|
        <router-link to="/diff">watch和computed区别</router-link>|
        <router-link to="/diff">watch和computed区别</router-link>|
        <router-link to="/watch_arr">监听数组</router-link>|
        <router-link to="/globalCom">全局组件</router-link>|
        <router-link to="/temCom">局部组件</router-link>|
        <router-link to="/father">父亲</router-link>|
        <router-link to="/grandpa">爷爷</router-link>|
        <router-link to="/router">跳转传参</router-link>|
        <router-link to="/slot">插槽</router-link>|
        <router-link to="/vuex">vuex</router-link>|
        <router-link to="/vuexFn">vuex四个辅助函数</router-link>|
        <router-link to="/directive">自定义指令</router-link>|
        <router-link to="/mixin">混入</router-link>|














        <br>
        <br>
        <br>
        <br>


    <router-view/>
  </div>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
